<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  span {
    font-size: 20px;
    margin: 500px 500px;
  }
</style>

<body>
  <script>
    window.document.body.onclick = (event) => {
      let e = window.event || eve
      let pElent = document.createElement('span')
      let textDode = document.createTextNode('随机出现的文字');
      pElent.appendChild(textDode)
      pElent.style.color = getColor()
      document.body.appendChild(pElent)
      console.log(pElent.style)
      function getNum(num1, num2) {
        var max, min;
        if (num1 > num2) {
          max = num1;
          min = num2
        } else {
          max = num2;
          min = num1
        }
        return Math.round(Math.random() * (max - min) + min)
      }
      function getColor() {
        var a = '#'
        var c = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd']
        for (var i = 0; i < 6; i++) {
          a += c[getNum(0, 15)]
        }
        return a
      }
      setTimeout(() => {
        pElent.style.opacity = '0'
        pElent.style.transform = 'translateX(-300px)'
      }, 500);
    }
  </script>
</body>

</html>